<template>
  <el-form :model="formdata"
           inline
           ref="dataForm"
           style="margin:4px;margin-left:0;padding-left:0;">
    <div class="tablediv" style="background:#f6f6f6;display:flex">
      <table class="cutable">
        <thead>
          <tr>
            <th style="width:200px">{{$t('custom.component.nextTicketRender.name')}}</th>
            <th style="width:200px">{{$t('custom.component.nextTicketRender.sericeBoard')}}</th>
            <th style="width:200px">{{$t('custom.component.nextTicketRender.status')}}</th>
            <th v-for="(item) in columns"
                :key="item"
                style="width:100px">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in params"
              :key="item.index">
            <td>{{item.name}}</td>
            <td>
              <el-tooltip :open-delay="1000" :content="$t('custom.component.nextTicketRender.content')" placement="top">
                <el-select v-model="item.subtypes"  placeholder="" @change="subtypesChange($event,item)">
                  <el-option v-for="sitem in subtypes"
                            :key="sitem.value"
                            :label="sitem.name"
                            :value="sitem.boardId">
                  </el-option>
                </el-select>
              </el-tooltip>
            </td>
            <td>
              <el-select v-model="item.status"  placeholder="">
                <el-option v-for="sitem in item.statusOption"
                           :key="sitem.statusId"
                           :label="sitem.name"
                           :value="sitem.statusId">
                </el-option>
              </el-select>
            </td>
            <td v-for="(item2,index2) in item.points"
                style="text-align:center"
                :key="item2.time"
                @click="tdclick(item2,'res'+index+'-'+index2)">
              <el-input v-show="item2.showInput===true"
                        size="small"
                        v-model="item2.point"
                        :placeholder="$t('custom.component.nextTicketRender.placeholder')"
                        @blur="tdblur(item2)"
                        :ref="'res'+index+'-'+index2"></el-input>
              <span v-show="item2.showInput!==true">{{item2.point}}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-form>
</template>

<script>
import TypeInput from './components/type-input'
import TypeSelectApi from './components/type-select-api'
import TypeSelectMoreApi from './components/type-select-more-api'
import TypeText from './components/type-text'
import TypeBoardStatus from './components/type-board-status'
import mixinTypeViewModule from '@/mixins/next-ticket-rule-view-module'
import { debounce } from 'lodash'
export default {
  mixins: [mixinTypeViewModule],
  components: { TypeInput, TypeSelectApi, TypeSelectMoreApi, TypeText, TypeBoardStatus },
  props: {
    showJson: {
      type: Array,
      default: () => {
        return []
      }
    },
    params: {
      type: Array,
      default: () => {
        return []
      }
    },
    nextTicketType: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      formdata: { formdata: this.params },
      columns: [],
      statusDrp: [],
      interfaceNoDataCount: 0,
      subtypes: []
    }
  },
  methods: {
    init () {
      // this.getSelectDataLists()
      this.getServiceBoardDataLists()
      // this.params.forEach(element => {
      //   element.status = null
      // })
      if (this.params.length > 0) {
        var columnObj = this.params[0]
        var columns = []
        columnObj.points.forEach(element => {
          columns.push(element.time)
        })
        this.columns = columns
      }
    },
    validateRules () {
      return this.$refs['dataForm'].validate()
    },
    tdblur (item) {
      this.$set(item, 'showInput', false)
    },
    tdclick (item, refsname) {
      this.$set(item, 'showInput', true)
      setTimeout(() => {
        this.$refs[refsname][0].$el.querySelector('input').focus()
      }, 10)
    },
    subtypesChange (boardId, item) {
      this.getSelectDataLists(boardId, item)
    },
    getSelectDataLists (boardId, row) {
      // 4
      let item
      let params
      if (this.nextTicketType !== 'autotask') item = { interfaceUrl: `web/api-service/board-status/ticket_status?boardId=${boardId}` }
      else {
        item = { interfaceUrl: 'web/api-service/board-subdata/getBoardSubdata?apiType=ORDERS_STATUSES' }
        params = {
          tenantCode: this.$store.state.user.tenantCode
        }
      }
      // var item = { interfaceUrl: 'web/api-service/board-subdata/getBoardSubdata?apiType=ORDERS_STATUSES' }
      const url = item.interfaceUrl
      if (item.params && item.params['type'] && typeof item.params['type'] !== 'undefined') {
        params = {
          ...params,
          ...item.params
        }
      }
      this.$interface.clientReport.getBoardListForBotApi(url, params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            // this.resetDataLists(item)
            // return this.$message.error(res.msg)
            return false
          }
          if (res.data) {
            // row.status = res.data
            this.$set(row, 'statusOption', res.data)
            // this.selectDataObj[`${item.fields}ListsOrigin`] = res.data
            // this.selectDataObj = Object.assign({}, this.selectDataObj)

            if (res.data.length <= 0) {
              // this.resetDataLists(item)
            }
          }
        }).catch(() => {
          // this.resetDataLists(item)
        })
    },
    getServiceBoardDataLists () {
      // 4
      let item
      let params
      if (this.nextTicketType !== 'autotask') item = { interfaceUrl: 'web/api-service/boards/ticket_board' }
      else {
        item = { interfaceUrl: 'web/api-service/board-subdata/getBoardSubdata?apiType=COMPANY_STATUS' }
        params = {
          tenantCode: this.$store.state.user.tenantCode
        }
      }
      const url = item.interfaceUrl
      if (item.params && item.params['type'] && typeof item.params['type'] !== 'undefined') {
        params = {
          ...params,
          ...item.params
        }
      }
      this.$interface.clientReport.getBoardListForBotApi(url, params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.resetServiceBoardDataLists(item)
            // return this.$message.error(res.msg)
            return false
          }
          if (res.data) {
            this.subtypes = res.data
            // this.selectDataObj[`${item.fields}ListsOrigin`] = res.data
            // this.selectDataObj = Object.assign({}, this.selectDataObj)

            if (res.data.length <= 0) {
              this.resetServiceBoardDataLists(item)
            }
          }
        }).catch(() => {
          this.resetServiceBoardDataLists(item)
        })
    },
    resetDataLists: debounce(function (item) {
      this.interfaceNoDataCount++
      if (this.interfaceNoDataCount > 5) {
        return false
      }
      this.getSelectDataLists(item)
    }, 2000),
    resetServiceBoardDataLists: debounce(function (item) {
      this.interfaceNoDataCount++
      if (this.interfaceNoDataCount > 5) {
        return false
      }
      this.getServiceBoardDataLists(item)
    }, 2000)
  }
}
</script>
<style scoped >
td {
  width: 70px;
}
.tablediv {
}
.cutable {
  min-width: 500px;
  overflow-x: scroll;
}
</style>
